<template>
  <div class="dome1">
    <div style="position: absolute;top: 0px;left: 0px;">dome1</div>
    <button @click="onClose">{{ isShow ? '关闭' : '打开' }}</button>
    <Dome2 v-if="isShow" :url="url" />
  </div>
</template>

<script>
import Dome2 from "./dome2.vue";
export default {
  name: 'TestDomeOne',
  data () {
    return {
      name: 'dome1',
      isShow: true,
      url: 'https://www.baidu.com'
    }
  },
  components: { Dome2 },
  beforeCreate () {
    // console.log('创建前->beforeCreate->dome1', `${this.name}-1`);
    console.log('创建前->beforeCreate->dome1');
  },
  created () {
    // console.log('创建->created->dome1', `${this.name}-2`);
    console.log('创建->created->dome1');
  },
  beforeMount () {
    // console.log('挂载前->beforeMount->dome1', `${this.name}-5`);
    console.log('挂载前->beforeMount->dome1');
  },
  mounted () {
    // console.log('挂载->mounted->dome1', `${this.name}-6`);
    console.log('挂载->mounted->dome1');
  },
  beforeUpdate () {
    console.log('更新前->beforeUpdate->dome1', `${this.name}-3`);
  },
  updated () {
    console.log('更新->updated->dome1', `${this.name}-4`);
  },
  beforeUnmount () {
    console.log('销毁前->beforeUnmount->dome1', `${this.name}-7`);
  },
  unmounted () {
    console.log('销毁->unmounted->dome1', `${this.name}-8`);
  },
  methods: {
    onClose () {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style scoped>
.dome1 {
  width: 1000px;
  height: 800px;
  background-color: rosybrown;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
